<script setup lang="ts">
import {NModal, NSpin} from 'naive-ui'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnLoading'
})

/**
 * 组件参数
 */
const {
  description = '加载中...',
  zIndex,
  to = 'body',
  displayDirective = 'if',
  spinSize = 'medium'
} = defineProps<{
  description?: string
  zIndex?: number,
  to?: string | HTMLElement,
  displayDirective?: 'show' | 'if',
  spinSize?: 'small' | 'medium' | 'large' | number
}>()

/**
 * 组件双向数据绑定
 */
const show = defineModel<boolean>('show', {default: false})

/**
 * 组件自定义事件
 */
const emits = defineEmits<{
  /**
   * 焦点在 Modal 内部时按下 Esc 键的回调
   */
  (e: 'esc'): void;
  /**
   * 点击遮罩层的回调
   */
  (e: 'maskClick'): void;
}>()
</script>

<template>
  <div class="stn-loading">
    <n-modal
      :style="{boxShadow: 'none'}"
      v-model:show="show"
      :z-index="zIndex"
      :to="to"
      :display-directive="displayDirective"
      :auto-focus="false"
      @esc="() => emits('esc')"
      @mask-click="() => emits('maskClick')"
    >
      <slot name="content">
        <div class="stn-loading__content">
          <n-spin :size="spinSize">
            <template #default>
              <slot name="spin-default"></slot>
            </template>
            <template #description>
              <slot name="spin-description">
                <span
                  class="stn-loading__content__description"
                  :style="{whiteSpace: 'nowrap'}"
                >{{ description }}</span>
              </slot>
            </template>
          </n-spin>
        </div>
      </slot>
    </n-modal>
  </div>
</template>

<style scoped lang="scss">
.stn-loading {

  .stn-loading__content {
    display: flex;
    justify-content: center;
    align-items: center;

    .stn-loading__content__description {
      white-space: nowrap;
    }
  }
}
</style>
